<template>
  <div class="tool-decode">
    <div class="nav">
      <div class="left" @click="doClose">
        <mo-icon name="back" width="24" height="24" />
        <span class="ml-15">Decode/Encode</span>
      </div>
    </div>

    <div class="main-wapper">
      <div class="main">
        <el-input v-model="str" type="textarea" resize="none"></el-input>
        <div class="center">
          <el-button @click="ASCIIToUnicode">ASCII <i style="font-size: 16px;margin: 0 3px;" class="el-icon-right"></i> Unicode</el-button>
          <el-button @click="UnicodeToASCII">Unicode <i style="font-size: 16px;margin: 0 3px;" class="el-icon-right"></i> ASCII</el-button>
          <el-button @click="UnicodeToChinaStr">Unicode <i style="font-size: 16px;margin: 0 3px;" class="el-icon-right"></i> 中文</el-button>
          <el-button @click="ChinaStrToUnicode">中文 <i style="font-size: 16px;margin: 0 3px;" class="el-icon-right"></i> Unicode</el-button>
          <el-button @click="Utf8ToChinaStr">UTF-8 <i style="font-size: 16px;margin: 0 3px;" class="el-icon-right"></i> 中文</el-button>
          <el-button @click="ChinaStrToUtf8">中文 <i style="font-size: 16px;margin: 0 3px;" class="el-icon-right"></i> UTF-8</el-button>
          <el-button @click="UrlDecode">URL <i style="font-size: 16px;margin: 0 3px;" class="el-icon-right"></i> Decode</el-button>
          <el-button @click="UrlEncode">URL <i style="font-size: 16px;margin: 0 3px;" class="el-icon-right"></i> Encode</el-button>
          <el-button @click="HexToString">Hex <i style="font-size: 16px;margin: 0 3px;" class="el-icon-right"></i> Decode</el-button>
          <el-button @click="StringToHex">Hex <i style="font-size: 16px;margin: 0 3px;" class="el-icon-right"></i> Encode</el-button>
          <el-button @click="HtmlDecode">Html <i style="font-size: 16px;margin: 0 3px;" class="el-icon-right"></i> Decode</el-button>
          <el-button @click="HtmlEncode">Html <i style="font-size: 16px;margin: 0 3px;" class="el-icon-right"></i> Encode</el-button>
        </div>
        <el-input v-model="str1" readonly type="textarea" resize="none"></el-input>
      </div>
    </div>

  </div>
</template>

<script>
// import FileUtil from '@shared/FileUtil'
import '@/components/Icons/folder.js'
import '@/components/Icons/back.js'

export default {
  name: 'mo-tool-decode',
  data () {
    return {
      str: '',
      str1: ''
    }
  },
  components: {},
  props: {},
  computed: {},
  watch: {},
  methods: {
    doClose () {
      this.$emit('doClose')
    },
    ASCIIToUnicode () {
      let result = ''
      for (let i = 0; i < this.str.length; i += 1) {
        result += '&#' + this.str.charCodeAt(i) + ';'
      }
      this.str1 = result
    },
    UnicodeToASCII () {
      let result = ''
      let code = this.str.match(/&#(\d+);/g)
      if (code == null) {
        return result
      }
      for (let i = 0; i < code.length; i++) { result += String.fromCharCode(code[i].replace(/[&#;]/g, '')) }
      this.str1 = result
    },
    UnicodeToChinaStr () {
      let t = '{"t":"' + this.str + '"}'
      console.log('t: ', t)
      this.str1 = JSON.parse(t).t
    },
    ChinaStrToUnicode () {
      let unicodeStr = ''
      for (let i = 0; i < this.str.length; i++) {
        unicodeStr += '\\u' + this.str.charCodeAt(i).toString(16).padStart(4, '0000')
      }
      this.str1 = unicodeStr
    },
    Utf8ToChinaStr () {
      this.str1 = unescape(this.str.replace(/&#x/g, '%u').replace(/;/g, ''))
    },
    ChinaStrToUtf8 () {
      // eslint-disable-next-line no-control-regex
      this.str1 = this.str.replace(/[^\u0000-\u00FF]/g, function ($0) {
        return escape($0).replace(/(%u)(\w{4})/gi, '&#x$2;')
      })
    },
    UrlEncode () {
      this.str1 = encodeURIComponent(this.str)
    },
    UrlDecode () {
      this.str1 = decodeURIComponent(this.str)
    },
    StringToHex () {
      const utf8encoder = new TextEncoder()
      const rb = utf8encoder.encode(this.str)
      let result = ''
      for (const b of rb) {
        result += '%' + ('0' + b.toString(16)).slice(-2)
      }
      this.str1 = result
    },
    HexToString () {
      this.str1 = decodeURIComponent(
        this.str.replace(/\s+/g, '') // remove spaces
      )
    },
    HtmlEncode: function () {
      let temp = document.createElement('div');
      (temp.textContent !== undefined) ? (temp.textContent = this.str) : (temp.innerText = this.str)
      let output = temp.innerHTML
      temp = null
      this.str1 = output
    },
    HtmlDecode: function () {
      let temp = document.createElement('div')
      temp.innerHTML = this.str
      let output = temp.innerText || temp.textContent
      temp = null
      this.str1 = output
    }
  },
  created: function () {}
}
</script>

<style lang="scss">
  .tool-decode{
    width: 100%;
    height: 100%;
    background: #1d2033;
    display: flex;
    flex-direction: column;
    .nav{
      height: 76px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      background: #282b3d;
      .left{
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 6px 0;
      }
    }
    .main-wapper{
      flex: 1;
      width: 100%;
      overflow: auto;
      padding: 12px;
      color: rgba(255,255,255,0.7);
      &::-webkit-scrollbar{
        width: 0;
        height: 0;
        display: none;
      }
      .main{
        background: #32364a;
        border-radius: 8px;
        padding: 20px;
        display: flex;
        height: 100%;

        .el-textarea {
          height: 100%;
          >textarea {
            height: 100%;
            font-size: 15px;
          }
        }

        .center {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 20px;

          .el-button {
            margin-bottom: 20px;
            margin-left: 0;
            margin-right: 0;
            width: 134px;
          }

          .el-button >span {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
  }
</style>
